import React, {
  useMemo,
  memo,
  Fragment,
  useState,
  useRef,
  useEffect,
} from "react";
import Style from "./index.module.css";

interface ItemProps {
  lable: string;
  check: boolean;
  id: string;
  isDel: boolean;
}

const Page5 = React.memo((props) => {
  const [list, setList] = useState<ItemProps[]>([]);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [type, setType] = useState(0); // 0 选择 1 删除 2 计算
  const [isAllCheck, setIsAllCheck] = useState(false);

  // 添加
  const addList = () => {
    if (!inputRef.current) return;
    if (inputRef.current.value) {
      const lable = inputRef.current.value;
      inputRef.current.value = "";
      const addList: ItemProps[] = [
        ...list,
        {
          lable,
          check: false,
          id: new Date() + "",
          isDel: false,
        },
      ];
      setList(addList);
    }
  };

  // 单个删除
  const handleDel = (e, value) => {
    let newList: ItemProps[] = [];
    list.map((item) => {
      if (item.id !== value.id) {
        newList.push(item);
      }
    });
    setList(newList);
  };

  // 全选
  const handleAllCheck = () => {
    const newList = list.map((item) => {
      item.check = !isAllCheck;
      item.isDel = !isAllCheck;

      return item;
    });
    setList(newList);
    setIsAllCheck(!isAllCheck);
  };

  // 单个勾选
  const handleChange = (e, value) => {
    const newList = list.map((item) => {
      if (item.id == value.id) {
        item.check = !value.check;
        item.isDel = !value.isDel;
      }
      return item;
    });
    const isAllCheck = list.every((item) => item.check);
    setIsAllCheck(isAllCheck);
    setList(newList);
  };

  // 计算组件数组渲染
  const calcList= useMemo(() => {
    let arr: ItemProps[] = [];
    list.forEach((item) => {
      if (type === 0) {
        arr.push(item);
      } else if (type === 1 && !item.isDel) {
        arr.push(item);
      } else if (type === 2 && item.isDel) {
        arr.push(item);
      }
    });
    return arr;
  }, [type,list]);

  return (
    <div className={Style.mainWrap}>
      <div>Page5</div>

      <div className={Style.contentWrap}>
        <div>
          <input
            checked={isAllCheck}
            onClick={handleAllCheck}
            type="checkbox"
          />
          <input
            type="text"
            ref={inputRef}
            placeholder="请输入.."
            onKeyUp={(e) => addList}
          />
          <button onClick={addList}>add</button>
        </div>

        {calcList.map((item: ItemProps, index: number) => {
          
          return (
            <div key={index}>
              <input
                onChange={(e) => handleChange(e, item)}
                checked={item.check}
                type="checkbox"
              />
              <span style={{ color: item.isDel ? "red" : "" }}>
                {item.lable}
              </span>
              <button onClick={(e) => handleDel(e, item)}>删除</button>
            </div>
          );

          // 问题：
          // react 数组对象属性监视计算
          // react 对象属性变化监视计算

          // if (type === 0) {
          //     return <div key={index}>
          //         <input onChange={(e) => handleChange(e, item)} checked={item.check} type="checkbox" />
          //         <span style={{ color: item.isDel ? 'red' : '' }}>{item.lable}</span>
          //         <button onClick={(e) => handleDel(e, item)}>删除</button>
          //     </div>
          // } else if (type == 1&&!item.isDel) {
          //     return <div key={index}>
          //             <input onChange={(e) => handleChange(e, item)} checked={item.check} type="checkbox" />
          //             <span>{item.lable}</span>
          //             <button onClick={(e) => handleDel(e, item)}>删除</button>
          //         </div>

          // } else {
          //     if (item.isDel) {
          //         return <div key={index}>
          //             <input onChange={(e) => handleChange(e, item)} checked={item.check} type="checkbox" />
          //             <span style={{ color: 'red' }}>{item.lable}</span>
          //             <button onClick={(e) => handleDel(e, item)}>删除</button>
          //         </div>
          //     }
          // }
        })}

        <div>
          <span>数量：{list.length}</span>
          <button
            onClick={() => {
              setType(0);
            }}
          >
            全选
          </button>
          <button
            onClick={() => {
              setType(1);
            }}
          >
            过滤未标红
          </button>
          <button
            onClick={() => {
              setType(2);
            }}
          >
            过滤标红
          </button>
        </div>
      </div>
    </div>
  );
});

export default Page5;
